<style lang="scss">
.poster-wrap{
  margin: 20rpx;
  display: flex;
  .pic-box{
    display: inline-block;
    width: 345rpx;

  }
  .right{
    margin-left: 20rpx;
  }
}
.pic-item{
  border: 1px  solid #eee;
  margin-bottom: 20rpx;
  background: white;
  overflow: hidden;
  border-radius: 10rpx;
  /*box-shadow: 0px 2px 4px rgba(0,0,0,.3);*/
  .pic{
    width: 345rpx;
  }
  .userinfo{
    display: flex;
    padding: 10px;
    align-items: center;
    .headimg{
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .info{
      flex: 1;
      padding-left: 10px;
      font-size: 14px;
      .nickname{
        color: #555;
        height: 24px;
        line-height: 24px;
      }
      .create_at{
        font-size: 12px;
        height: 16px;
        line-height: 16px;
        color: #999;
      }
    }
  }

}

.btn-wrap{
  position: fixed;
  width: 750rpx;
  height: 92rpx;
  overflow: hidden;
  z-index: 4;
  bottom: 0;
}
.btn{
  height: 92rpx;
  border-radius: 0;
  font-size: 14px;
  line-height: 92rpx;
  border:none !important;
}
</style>
<template>
<div class="page-wrap">
  <view class="poster-wrap">
    <view class="left pic-box">
      <block v-for="(item,idx) in list" >
        <block v-if="idx%2==0">
          <view class="pic-item" :key="idx" @click="preview(item.pic)">
            <image mode="widthFix" :src="item.pic" class="pic" />
            <view class="userinfo">
              <image class="headimg" :src="item.headimg" />
              <view class="info">
                <view class="nickname">{{item.nickname}}</view>
                <view class="create_at">{{item.create_at}}</view>
              </view>
            </view>
          </view>
        </block>
      </block>
    </view>
    <view class="right pic-box">
      <block v-for="(item,idx) in list" >
        <block v-if="idx%2==1">
          <view class="pic-item" :key="idx" @click="preview(item.pic)">
            <image mode="widthFix" :src="item.pic" class="pic" />
            <view class="userinfo">
              <image class="headimg" :src="item.headimg" />
              <view class="info">
                <view class="nickname">{{item.nickname}}</view>
                <view class="create_at">{{item.create_at}}</view>
              </view>
            </view>
          </view>
        </block>
      </block>
    </view>
  </view>
  <view style="height: 100rpx"></view>
  <view class="btn-wrap">
    <button class="btn" @click="toCreat"  type="primary">已有{{list.length}}条信息,点我参与制作</button>
  </view>
</div>
</template>
<script>
import { pageMixin } from '@/mixins'
import { getPosterPic } from '@/api'
import { linkToEasy } from '@/common/fun'

export default {
  mixins: [pageMixin],
  data () {
    return {
      id: '',
      list: []
    }
  },
  methods: {
    toCreat () {
      linkToEasy('/pages/poster/creat?id=' + this.id)
    },
    preview (current) {
      uni.previewImage({
        current, // 当前显示图片的http链接
        urls: [current] // 需要预览的图片http链接列表
      })
    },
    async _init_func () {
      getPosterPic({ poster_id: this.id }, { tip: 'loading',method:'get'}).then(res => {
        this.list = res.data
      })
    }
  },
  onLoad (options) {
    this.id = options.id
    this._init_func()
  },

  onShareAppMessage () {
    // let userInfo = wx.getStorageSync('userInfo'),path = '/pages/map/deatil?id='+this.map.id;
    //
    // //加入分享标识
    // if(userInfo && userInfo.id){
    //   path = path + '&from_mid=' + userInfo.id
    // }
    //
    return {
      title: '自定义海报'
      // imageUrl: this.map.thumb || wx.state.logo,
      // path: path
    }
  }
}
</script>
